/*
 * @Description:
 * @Author: Cxy
 * @Date: 2023-04-13 15:11:55
 * @LastEditors: Cxy
 * @LastEditTime: 2025-08-19 21:49:25
 * @FilePath: \xy-admin\docs\.vitepress\components\XyIcon\src\index.ts
 */
import { Icon } from '@iconify/vue'
import { defineComponent, h, markRaw, ref, watch, type Ref } from 'vue'

type iconConfigInter = Ref<{
  dom: any
  type: string
  asyncLoad: boolean
  icon: string
}>

export default defineComponent({
  name: 'XyIcon',
  components: { Icon },
  props: {
    icon: {
      type: String,
      default: 'ep/info-filled'
    }
  },
  setup(props) {
    const iconConfig: iconConfigInter = ref({
      dom: markRaw({}),
      type: '',
      asyncLoad: false,
      icon: ''
    })
    watch(
      () => props.icon,
      async icon => {
        iconConfig.value.icon = icon.replace(/\//g, ':')
        iconConfig.value.asyncLoad = true
      },
      {
        immediate: true
      }
    )
    return {
      iconConfig
    }
  },
  render() {
    const {
      $attrs: attrs,
      iconConfig: { icon }
    } = this
    /* iconify 线上图标加载 https://icones.js.org/ */
    return h(Icon, {
      icon,
      style: attrs?.style ? Object.assign(attrs.style, { outline: 'none' }) : { outline: 'none' },
      ...attrs
    })
  }
})
